Angular Directives are the most important features of Angular. In this, tutorial We will look at three types of directives that Angular supports like Component, Structural, and Attribute Directives. We also look at the few of the most commonly used Angular directives.
The Angular directive helps us to manipulate the DOM. You can change the appearance, behavior, or layout of a DOM element using the Directives. They help you to extend HTML
There are three kinds of directives in Angular:
Components are special directives in Angular. They are the directive with a template (view) We covered how to create Components in Angular tutorial.
Structural directives can change the DOM layout by adding and removing DOM elements. All structural Directives are preceded by Asterix symbol
The ngFor is an Angular structural directive, which repeats a portion of the HTML template once per each item from an iterable list (Collection). The ngFor is similar to ngRepeat in AngularJS
<tr *ngFor="let customer of customers;">
<td>{{customer.customerNo}}</td>
<td>{{customer.name}}</td>
<td>{{customer.address}}</td>
<td>{{customer.city}}</td>
<td>{{customer.state}}</td>
</tr>
You can read more about the Angular ngFor Directive tutorial.
The ngSwitch directive lets you add/remove HTML elements depending on a match expression.ngSwitch directive used along with ngSwitchCase and ngSwitchDefault
<div [ngSwitch]="Switch_Expression">
<div *ngSwitchCase="MatchExpression1”> First Template</div>
<div *ngSwitchCase="MatchExpression2">Second template</div>
<div *ngSwitchCase="MatchExpression3">Third Template</div>
<div *ngSwitchCase="MatchExpression4">Third Template</div>
<div *ngSwitchDefault?>Default Template</div>
</div>
You can read more about the Angular ngSwitch Directive tutorial.
The ngIf Directives is used to add or remove HTML elements based on an expression. The expression must return a boolean value. If the expression is false then the element is removed, else the element is inserted
<div *ngIf="condition">
This is shown if condition is true
</div>
You can read more about Angular ngIf Directive tutorial.
An Attribute or style directive can change the appearance or behavior of an element.
The ngModel directive is used the achieve the two-way data binding. We have covered ngModel directive in Data Binding in Angular Tutorial
The ngClass is used to add or remove the CSS classes from an HTML element. Using the ngClass one can create dynamic styles in HTML pages
<div [ngClass]="'first second'">...</div>
ngStyle is used to change the multiple style properties of our HTML elements. We can also bind these properties to values that can be updated by the user or our components.
<div [ngStyle]="{'color': 'blue', 'font-size': '24px', 'font-weight': 'bold'}">
some text
</div>
You can also build custom directives in Angular. The Process is to create a JavaScript class and apply the @Directive attribute to that class. You can write the desired behavior in the class.
In this tutorial, we introduced you to the directives in Angular. In the next few tutorials, we will look at some of the important directives in detail
